<template>
  <div class="index-container">
    <el-carousel
      ref="carousel"
      :height="carousel_height"
      direction="horizontal"
      :autoplay="false"
      arrow="never"
      trigger="click"
      :loop="false"
      @change="swiperChange"
    >
      <el-carousel-item v-for="(item, index) in sliders" :key="index">
        <div class="index-body">
          <img class="index-img" :src="item.img" alt="" />
          <div class="index-content" :class="isHover ? 'bg0' : 'bg5'">
            <div class="center-container" v-if="item.type == 1">
              <div
                class="center-text"
                :class="{ active: currentIndex == index }"
              >
                <div class="index-title">{{ item.title }}</div>
                <div
                  class="index-subtitle"
                  @mouseenter="hoverText"
                  @mouseout="outText"
                >
                  {{ item.subTitle }}
                </div>
              </div>

              <div class="index-info">{{ item.describe }}</div>
            </div>
            <div class="center-container2" v-if="item.type == 2">
              <div
                class="center-text2"
                :class="{ active2: currentIndex == index }"
              >
                <div class="index-title2">{{ item.title }}</div>
                <div
                  class="index-subtitle2"
                  @mouseenter="hoverText"
                  @mouseout="outText"
                >
                  {{ item.subTitle }}
                </div>
              </div>
            </div>
            <div class="center-container3" v-if="item.type == 3">
              <div
                class="center-text3"
                :class="{ active3: currentIndex == index }"
              >
                <div class="index-title3" v-html="item.title"></div>
                <div
                  class="index-subtitle3"
                  @mouseenter="hoverText"
                  @mouseout="outText"
                  v-html="item.subTitle"
                ></div>
              </div>
            </div>
            <div class="center-container4" v-if="item.type == 4">
              <div
                class="center-text4"
                :class="{ active3: currentIndex == index }"
              >
                <img class="index-title4" :src="item.title" alt="" />
                <img
                  class="index-subtitle4"
                  :src="item.subTitle"
                  alt=""
                  @click="gotoPred"
                />
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- 公共用 按钮 -->
    <div class="menu">
      <div class="hamburger menu" @click="clickMenu">
        <div class="bar" :class="menuClicked ? 'animate' : ''"></div>
      </div>
      <div class="uvnav down" @click="next"></div>
      <div class="uvnav up" @click="prev"></div>
      <a id="mainlogo" href="#"><img src="../static/slider/LOGO.png" /> </a>
      <a class="cnav tr gohome" href="#" style="" v-if="menuClicked">GO BACK</a>
      <a
        class="cnav tr gohome"
        style="cursor: pointer"
        @click="toLogin"
        v-if="!menuClicked && !isLogin"
        >LOG IN</a
      >
      <a
        class="cnav tr login-text"
        @click="toPerson"
        v-if="!menuClicked && isLogin"
      >
        <div>{{ userInfo.nickName }}</div>
        <img src="../static/slider/avatar.png" alt="" />
      </a>
      <a class="cnav bl contact zt-more" href="#">CONTACT</a>
      <a class="cnav br awards zt-more" href="#">AWARDS</a>
      <div
        class="popup-box"
        :class="{ menuActive: menuClicked }"
        ref="popup_box"
      >
        <div class="popup-body" v-if="menuClicked">
          <div>FOOD</div>
          <div>CHEF</div>
          <div>PLACE</div>
          <div>STORY</div>
          <div>BOOKINGS</div>
          <div>EVENTS</div>
        </div>
        <div class="concat-box" v-if="menuClicked">
          <div class="concat-img">
            <div class="F1"></div>
            <div class="W1"></div>
            <div class="Y1"></div>
          </div>
          <div class="concat-text">
            PRESS ACCESS DUAL BY FIT ISLAND PORTFOLIO
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "FoodDetail",
  data() {
    return {
      menuClicked: false,
      sliders: [],
      currentIndex: 0,
      carousel_height: "100%",
      flag: true,
      isHover: false,
      isChange: true,
      isLogin: false,
      userInfo: {},
    };
  },
  created() {
    this.checkedLoginStatus();
  },
  methods: {
    checkedLoginStatus() {
      if (this.$user.getToken()) {
        this.isLogin = true;
        this.userInfo = JSON.parse(this.$user.getUserInfo());
      }
    },
    toPerson() {
      this.$router.push({
        name: "PersonCenter",
      });
    },
    toLogin() {
      this.$router.push({
        name: "Login",
      });
    },
    gotoPred() {
      this.$router.push({
        name: "Predetermine",
      });
    },
    gotoLogin() {
      this.$router.push({
        name: "Login",
      });
    },
    clickMenu() {
      if (!this.menuClicked) {
        console.log(this.menuClicked, "this.menuClicked");
        this.$refs.popup_box.style.zIndex = 888;
        this.$refs.popup_box.style.width = "100vw";
      } else {
        this.$refs.popup_box.style.width = 0;
      }
      this.menuClicked = !this.menuClicked;
    },
    swiperChange(curVal, Val) {
      this.currentIndex = curVal;
    },
    hoverText() {
      this.isHover = true;
    },
    outText() {
      this.isHover = false;
    },
    async prev() {
      if (this.currentIndex == 0) {
        this.$router.push({
          name: "Index",
        });
        return;
      }
      await this.$nextTick();
      this.$refs.carousel.prev();
    },
    async next() {
      await this.$nextTick();
      this.$refs.carousel.next();
    },
    handleScroll(m) {
      let that = this;
      if (that.flag) {
        that.flag = false;
        if (m.deltaY > 0) {
          this.$refs.carousel.next();
        } else {
          this.$refs.carousel.prev();
        }
      }
      setTimeout(() => {
        that.flag = true;
      }, 2000);
    },

    debounce(fn, delay) {
      let timer = null;
      return function () {
        let that = this;
        let args = arguments;
        if (timer) clearTimeout(timer);
        timer = setTimeout(function () {
          fn.apply(that, args);
        }, delay);
      };
    },
  },
  mounted() {
    window.addEventListener("mousewheel", this.handleScroll, false);
    // window.addEventListener("DOMMouseScroll", this.handleScroll,false);
    setTimeout(() => {
      this.isChange = false;
    }, 5000);
    this.sliders = [
      {
        title: "FOOD",
        subTitle: "TASTE...",
        img: require("../static/slider/bg1.jpg"),
        describe:
          "IT IS AVANTGARDE,YES BUT FIGURATIVE AVANT-GARDE,NOT ABSTRACT WITH FLESH AND BONE",
        type: 1,
      },
      {
        title: "DUAL",
        subTitle: "WHERE FIT ISLAND'S CUISINE PREFORMAT ITS BEST",
        img: require("../static/slider/bg2.jpg"),
        type: 2,
      },
      {
        title: `FOOD IS OBVOUSLY THE MAIN REASON TO EXPERIENCE ULTRAVOLET, AND TASTEIS ITS PRIMARY\nFOCUS. BUT TO ASSUME THAT FOODIS ONLY ABOUT TASTEIS NAIVE. \n\rFOOD IS ULTIMATELY ABOUT EMOTION, AND EMOTION GOES BEYOND TASTE.\n\rEMOTON IS INFLUENCED BY YOUR MOOD.YOUR MEMORIES, YOUR SURROUNDINGS. YOUR\nEXPECTATIONS, THE PEOPLE SITTING NEXT TO YOU, YOUR CHAIR, YOUR SUBCONSCIOUS... THE\nLIGHTING, THE MEMORY OF AMUSIC,THE REALISM OF A SOUND, AMEW, APARTICULAR SCENT THE\nSO-CALLED ATMOSPHERE... AND ALL EXTERNAL PARAMETERS BUILDING UP YOUR PRE-CONCEIVE\nIDEA OF WHAT YOU ARE GOING TO TASTE...\n\rYOUR PSYCHO TASTE`,
        subTitle: `FOOD SHOULD SPEAK FOR ITSELF\nHAVE CHEFS BEEN ABLE TO CONTROL THE PSYCHO TASTE BEFORE?\nIS DISH DESIGN STILL RELEVANT? (CONSIDERING DUAL'S OTHER\nTECHNOLOGIES`,
        img: require("../static/slider/bg3.jpg"),
        type: 3,
      },
      // {
      //   title: require("../static/slider/menuBoder.png"),
      //   subTitle: require("../static/slider/menuBtn.png"),
      //   img: require("../static/slider/menuBg1.jpg"),
      //   type: 4,
      // },
    ];
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
img {
  width: 100%;
  height: 100%;
}

.index-container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.el-carousel {
  height: 100%;
}

.el-carousel__item.is-animating {
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
::v-deep .el-carousel__indicator.is-active button {
  opacity: 1;
  background-color: rgb(177, 153, 84);
}
::v-deep .el-carousel__indicator--vertical .el-carousel__button {
  width: 3px;
  height: 35px;
}

::v-deep .el-carousel__button {
  opacity: 1;
}

::v-deep .el-carousel__indicator--vertical {
  padding: 6px 22px;
}

::v-deep .el-carousel__indicators--vertical {
  top: 60%;
}

.bg5 {
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.8s ease-out;
}
.bg0 {
  background-color: rgba(0, 0, 0, 0);
  transition: all 0.8s ease-out;
}

.index-body {
  width: 100%;
  height: 100%;
}

.index-img {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.index-content {
  position: relative;
  z-index: 888;
  width: 100%;
  height: 100%;
}

.center-container {
  color: #fff;
  width: 100%;
  /* height: 125px; */
  overflow: hidden;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* transition: width 2s linear 1s; */
}

#mainlogo {
  position: fixed;
  top: 3.5%;
  left: 49.2%;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: all 1s ease;
  z-index: 66;
}

#mainlogo img {
  width: 10vw;
  /* height: 28vh; */
}

@keyframes showMove {
  0% {
    transform: translate(-140%, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes hideMove {
  0% {
    transform: translate(0%, 0%);
  }
  100% {
    transform: translate(140%, 0%);
  }
}
.center-text {
  animation-name: hideMove;
  animation-duration: 1s;
  animation-timing-function: ease;
}
.center-text.active {
  animation-name: showMove;
  animation-duration: 2s;
  animation-timing-function: ease;
  /* transform:translate(0%,0%); */
}
.index-title {
  font-size: 4.2vw;
  font-weight: bold;
}

.index-subtitle {
  font-size: 1.3vw;
  letter-spacing: 5px;
}

.index-subtitle:hover {
  color: rgb(177, 153, 84);
}

.center-container2 {
  color: #fff;
  width: 100%;
  /* height: 125px; */
  overflow: hidden;
  transform: translateY(-50%);
  position: absolute;
  top: 70%;
  right: 32%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* transition: width 2s linear 1s; */
}

.center-text2 {
  animation-name: hideMove2;
  animation-duration: 1s;
  animation-timing-function: ease;
}
.center-text2.active2 {
  animation-name: showMove2;
  animation-duration: 2s;
  animation-timing-function: ease;
  /* transform:translate(0%,0%); */
}

@keyframes showMove2 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hideMove2 {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}
.index-title2 {
  font-size: 3vw;
  font-weight: bold;
}

.index-subtitle2 {
  width: 24.5vw;
  font-size: 1.1vw;
  letter-spacing: 5px;
}

.index-subtitle2:hover {
  color: rgb(177, 153, 84);
}

.index-info {
  position: absolute;
  right: 5%;
  width: 17vw;
  text-align: right;
  font-size: 0.95vw;
}

.center-container3 {
  color: #fff;
  width: 100%;
  /* height: 900px; */
  overflow: hidden;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 26%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* transition: width 2s linear 1s; */
}

.center-text3 {
  animation-name: hideMove3;
  animation-duration: 1s;
  animation-timing-function: ease;
}
.center-text3.active3 {
  animation-name: showMove3;
  animation-duration: 2s;
  animation-timing-function: ease;
  /* transform:translate(0%,0%); */
  display: flex;
  align-items: end;
  flex-direction: column;
}

@keyframes showMove3 {
  0% {
    transform: scale(0.1);
  }
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes hideMove3 {
  0% {
    transform: scale(1);
  }
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(0.1);
  }
}
.index-title3 {
  width: 42vw;
  font-size: 0.83vw;
  margin-bottom: 2.2vh;
  text-align: right;
  line-height: 1.5;
  white-space: pre-wrap;
}

.index-subtitle3 {
  /* width: 600px; */
  font-size: 0.9vw;
  text-align: right;
  color: rgb(177, 153, 84);
  line-height: 2;
  white-space: pre-wrap;
}

.index-subtitle3:hover {
  color: rgb(255, 255, 255);
}

.popup-box {
  width: 0vw;
  height: 100vh;
  box-sizing: border-box;
  z-index: -1;
  /* background-color: aqua; */
  background-image: url("../static/slider/menuBg1.jpg");
  position: fixed;
  top: 0;
  left: 0;
  animation: hideMenu 0.5s linear;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes showMenu {
  0% {
    width: 0vw;
    opacity: 0;
  }
  30% {
    width: 30vw;
    opacity: 0.3;
  }
  50% {
    width: 50vw;
    opacity: 0.5;
  }
  70% {
    width: 70vw;
    opacity: 0.7;
  }
  100% {
    width: 100vw;
    opacity: 1;
  }
}

.menuActive {
  /* width: 100vw; */
  height: 100vh;
  animation: showMenu 0.5s linear;
}

@keyframes hideMenu {
  0% {
    width: 100vw;
    opacity: 1;
  }
  30% {
    width: 70vw;
    opacity: 0.7;
  }
  50% {
    opacity: 0.5;
    width: 50vw;
  }
  70% {
    opacity: 0.3;
    width: 30vw;
  }
  100% {
    opacity: 0;
    width: 0vw;
  }
}

.popup-body {
  width: 30%;
  height: 30%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 28px;
}

.popup-body div {
  margin-bottom: 15px;
  cursor: pointer;
}

.popup-body div:hover {
  color: rgb(177, 153, 84);
}

.concat-box {
  position: fixed;
  bottom: 20px;
  /* left: 38%; */
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.concat-img {
  display: flex;
  width: 32%;
  justify-content: space-between;
  margin-bottom: 20px;
}

.concat-img div {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.concat-text {
  font-size: 18px;
  color: #fff;
  letter-spacing: 1px;
}

.F1 {
  background-image: url("../static/slider/F静态.png");
  background-size: 100%;
}
.F1:hover {
  background-image: url("../static/slider/F点击.png");
  background-size: 100%;
}
.W1 {
  background-image: url("../static/slider/W静态.png");
  background-size: 100%;
}
.W1:hover {
  background-image: url("../static/slider/W点击.png");
  background-size: 100%;
}
.Y1 {
  background-image: url("../static/slider/Y静态.png");
  background-size: 100%;
}
.Y1:hover {
  background-image: url("../static/slider/Y点击.png");
  background-size: 100%;
}

.center-container4 {
  color: #fff;
  width: 100%;
  height: 900px;
  overflow: hidden;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  /* left: 26%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* transition: width 2s linear 1s; */
}

/* .center-text4 {
  animation-name: hideMove4;
  animation-duration: 1s;
  animation-timing-function: ease;
}
.center-text4.active4 {
  animation-name: showMove4;
  animation-duration: 2s;
  animation-timing-function: ease;
}

@keyframes showMove4 {
  0% {
    transform: scale(0.1);
  }
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes hideMove4 {
  0% {
    transform: scale(1);
  }
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(0.1);
  }
} */
.index-title4 {
  width: 500px;
  height: 450px;
  position: absolute;
  top: 20%;
  left: 37%;
}

.index-subtitle4 {
  width: 500px;
  height: 450px;
  position: absolute;
  top: 20%;
  left: 37%;
  cursor: pointer;
}
.cnav.tr {
  top: 30px;
  right: 30px;
}
.cnav.tr img {
  cursor: pointer;
  width: 2.5vw;
  height: 2.5vw;
}
.login-text {
  display: flex;
  align-items: center;
  font-size: 1vw;
  cursor: pointer;

  img {
    margin-left: 0.4vw;
  }
  /* flex-direction: column; */
}
</style>